@use '../tools/variables';

html,
body {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  width: 100%;
}

#app,
.application,
.application__view {
  height: 100%;
  width: 100%;
}

.application {
  &,
  &__view {
    align-content: center;
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    height: 100%;
    width: 100%;

    &--sidebar-alternative-state {
      .application__sidebar {
        display: none;
      }

      @media (max-width: 720px) {
        .application__sidebar {
          display: flex;
          transform: translateX(120px);
          z-index: unset;
        }

        .application__content {
          transform: translateX(120px);

          .modal {
            transform: translateX(-240px);
          }

          .context-menu__items {
            transform: translateX(-240px);
          }

          .alerts__list {
            transform: translateX(-240px);
          }

          .table__heading__resize-line {
            left: -240px;
          }
        }
      }
    }
  }

  &__content {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
    min-width: 60px;
    transition: transform 0.2s;

    @media (max-width: 720px) {
      width: 100vw;
      transform: translateX(-120px);
    }
  }

  &__panel {
    display: flex;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;

    &--torrent-list {
      transition: transform 0.5s;
      z-index: 2;

      &.is-open {
        transform: translateX(variables.$torrent-details--width);
      }
    }

    &--torrent-details {
      right: 100% - variables.$torrent-details--width;
      width: variables.$torrent-details--width;
      z-index: 1;
    }
  }
}
